<template>
  <div class="experience" id="experience">
    <div class="container">
      <h1 class="title">Work Experience</h1>
      <div
        class="list-content"
        v-for="(exItem, index) of workerList"
        :key="index"
      >
        <div class="list-content-l">
          <span class="list-content-date">{{exItem.date}}</span>
        </div>
        <div class="list-content-r">
          <h3 class="list-content-name">{{exItem.name}}</h3>
          <p class="list-content-text">{{exItem.content}}</p>
        </div>
        <div class="list-content-mLine"><i class="list-content-icon"></i></div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['workerList'],
    data() {
      return {
      }
    }
  }
</script>

<style>
  .experience {
    background: #000;
  }
  .list-content {
    position: relative;
    padding: 0 20px;
    color: #fff;
  }
  .list-content-mLine {
    position: absolute;
    height: 100%;
    width: 2px;
    background: #ccc;
    left: 50%;
    margin-left: -1px;
  }
  .list-content-l,
  .list-content-r {
    width: 50%;
    float: left;
  }
  .list-content-l {
    padding: 3em 6em 0 0;
    text-align: right;
  }
  
  .list-content-date {
    position: relative;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background: var(--green);
  }
  .list-content-date::after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color:  transparent transparent transparent var(--green);
    transform: translate(0, -50%);
  }
  
  .list-content-r {
    padding: 2.5em 0 2.5em 6em;
  }
  .list-content-name {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 1.5em;
    margin-bottom: .5em;
    border: 2px solid #f5e514;
    font-family: var(--fontStyle);
  }
  .list-content-text {
    line-height: 1.8em;
    text-align: justify;
  }
  .list-content-icon {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    top: 2.5em;
    left: 50%;
    margin-left: -25px;
    border-radius: 50%;
    background: var(--green);
    
  }
  .list-content-icon::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
  }
  .clearfix::after {
    display: table;
    content: '';
    clear: both;
  }
  .list-content:nth-child(odd) .list-content-l,
  .list-content:nth-child(odd) .list-content-r {
    float: right;
  }
  .list-content:nth-child(odd) .list-content-l {
    text-align: left;
    padding-left: 6em;
  }
  .list-content:nth-child(odd) .list-content-date::after {
    left: -10px;
    right: 0;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color:  transparent var(--green) transparent transparent ;
  }
  .list-content:nth-child(odd) .list-content-r {
    padding: 2.5em 6em 2.5em 0;
    text-align: right;
  }
</style>